<!DOCTYPE html>
<html>
  <head>
    <title>上传视频</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/upload/style.css" />
  </head>
  <style>
  	.resumable-list  li {
  		font-size:21px;
  		margin-bottom:14px;
  		margin-top: 3px;
  	}
  
  
  </style>
  <body>
  <if condition="$show_type eq 2">
  <div style="position:absolute;left:10px;top:10px; border-radius:5px;border:1px solid #aaa;background-color:#eee;">
  		<a href='javascript:;' onclick="go_back();" class="btn btn-primary" style="display:inline-block;padding:5px 10px;text-decoration:none;color:#666">返回</a>
  </div>
  <span style="font-weight:bold; color:red;">温馨提示：视频成功上传后需进行转码后方可使用！</span>
  </if>
    <div id="frame">
      <script src="__PUBLIC__/js/upload/jquery.min.js"></script>
      <script src="__PUBLIC__/js/upload/resumable.js"></script>
      <script src="/public/simpleboot/themes/resources/resource.js?ver=1.0"></script>
      <script src="__PUBLIC__/js/layer/layer.js"></script>
      <div class="resumable-drop" ondragenter="jQuery(this).addClass('resumable-dragover');" ondragend="jQuery(this).removeClass('resumable-dragover');" ondrop="jQuery(this).removeClass('resumable-dragover');">
        <a class="resumable-browse"><u>选择文件</u></a>
      </div>
      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
      <div class="resumable-progress">
        <table>
          <tr>
            <td width="100%"><div class="progress-container"><div class="progress-bar"></div></div></td>
            <td class="progress-text" nowrap="nowrap"></td>
            <td class="progress-pause" nowrap="nowrap">
              <a href="#" onclick="r.upload(); return(false);" class="progress-resume-link"><img src="__PUBLIC__/images/upload/resume.png" title="Resume upload" /></a>
              <a href="#" onclick="r.pause(); return(false);" class="progress-pause-link"><img src="__PUBLIC__/images/upload/pause.png" title="Pause upload" /></a>
            </td>
          </tr>
        </table>
      </div>                                                                                                                                                                                                                                                                                                                                                                                                                              
      <ul class="resumable-list"></ul>
      <input type="hidden" name="fileDir" id="fileDir" value="<?php echo $fileDir;?>">
      <input type="hidden" name="chosed_resource_ids" id="chosed_resource_ids" value="{$chosed_resource_ids}">
      <input type="hidden" name="transcoding_videos_name" id="transcoding_videos_name" value="">  <!-- 记录已经上传完成却还在转码的视频名称 -->
      <input type="hidden" name="call_back" id="call_back" value="{$call_back}">
      <input type="hidden" name="set_water" id="set_water" value="{$set_water}">
      <script>
        var r = new Resumable({
            target:'{:U("Admin/Resources/upload_files")}',
            chunkSize:1*1024*1024,
            simultaneousUploads:4,
            testChunks:true,
            throttleProgressCallbacks:1,
            fileDir:'',
            fileTime:'{$time}',
            fileSetWater:'{$set_water}'
          });
        /*
        target:后端的处理文件上传的upload.php代码
		chunkSize:文件分割成小片段的时候的大小，这里为1M
		testChunks:在上传每一段小文件的时候是否先去服务器检查是否存在
		*/
        // Resumable.js isn't supported, fall back on a different method
        if(!r.support) {
          $('.resumable-error').show();
        } else {
          // Show a place for dropping/selecting files
          $('.resumable-drop').show();
          r.assignDrop($('.resumable-drop')[0]);
          r.assignBrowse($('.resumable-browse')[0]);
          // Handle file add event
          r.on('fileAdded', function(file){
              // Show progress pabr
              $('.resumable-progress, .resumable-list').show();
              // Show pause, hide resume
              $('.resumable-progress .progress-resume-link').hide();
              $('.resumable-progress .progress-pause-link').show();
              // Add the file to the list
              $('.resumable-list').append('<li class="resumable-file-'+file.uniqueIdentifier+'">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
              $('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-name').html(file.fileName);
              // Actually start the upload
              r.upload();
            });
          r.on('pause', function(){
              // Show resume, hide pause
              $('.resumable-progress .progress-resume-link').show();
              $('.resumable-progress .progress-pause-link').hide();
            });
          r.on('complete', function(){
              // Hide pause/resume when the upload has completed
              $('.resumable-progress .progress-resume-link, .resumable-progress .progress-pause-link').hide();
            });
          r.on('fileSuccess', function(file,message){
        	  	var message_arr = message.split('~');
        	  	if(message_arr[0] == '1'){
        	  		$('#chosed_resource_ids').val($('#chosed_resource_ids').val()+message_arr[1]+",");
        	  		var chosed_img_ids = window.localStorage.chosed_img_ids;
        	  		var chosed_img_names = window.localStorage.chosed_img_names;
        	  		var chosed_img_urls = window.localStorage.chosed_img_urls;
        	  		
        	  		if(typeof(chosed_img_ids) == 'undefined'){
        	  			chosed_img_ids = '';
        	  			chosed_img_names = '';
        	  			chosed_img_urls = '';
        	  		}
        	  		window.localStorage.chosed_img_ids
        	  		window.localStorage.setItem('chosed_img_ids',chosed_img_ids+message_arr[1]+",");
        			window.localStorage.setItem('chosed_img_names',chosed_img_names+message_arr[2]+",");
        			window.localStorage.setItem('chosed_img_urls',chosed_img_urls+message_arr[3]+"~");
        	  		window.localStorage.setItem('chosed_resource_ids',chosed_img_ids+message_arr[1]+",");
        	  		$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(上传成功)');
        	  		//console.log(window.localStorage)
        	  	}else if(message_arr[0] == '2'){
        	  		$('#transcoding_videos_name').val($('#transcoding_videos_name').val()+message_arr[1]+",");
        	  		$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(上传成功,转码中)');
        	  	}
              // Reflect that the file upload has completed
              
            });
          r.on('fileError', function(file, message){
              // Reflect that the file upload has resulted in error
              $('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(file could not be uploaded: '+message+')');
            });
          r.on('fileProgress', function(file){
              // Handle progress for both the file and the overall upload
              $('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html(Math.floor(file.progress()*100) + '%');
              $('.progress-bar').css({width:Math.floor(r.progress()*100) + '%'});
            });
        }
        
        function go_back(){
   		 var chosed_resource_ids = $("#chosed_resource_ids").val();
   		 var call_back = $("#call_back").val();
   		 var set_water = $("#set_water").val();
   		 var transcoding_videos_name = $("#transcoding_videos_name").val();
		 window.location.href="<?php echo U('Admin/Resources/resource_library')?>"+"&set_water="+set_water+"&chosed_resource_ids="+chosed_resource_ids+"&show_type=2&type="+"<?php echo $type;?>"+"&call_back="+call_back+"&transcoding_videos_name="+transcoding_videos_name;
        }
      </script>
    </div>
    </body>
</html>